<!DOCTYPE html> 
<html> 

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

  <title>Survey</title>

  <!-- Style sheets -->
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
  <link rel="stylesheet" type="text/css" href="js/add2home.css" />
  <style type="text/css">
    iframe {background:white;}
    body .ui-footer .ui-title { white-space: normal; }
    body .ui-li .ui-li-desc { white-space: normal; }
    body .ui-li-static.ui-li { padding-right: 15px; }
    img { width: 100%; max-width: 400px; }
  </style>
  
  <!-- JQuery and Javascript -->
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script>
    $(document).bind("mobileinit", function () {
      $.mobile.defaultPageTransition = 'fade';
    });
  </script>
  <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
  <script type="text/javascript" src="js/add2home.js"></script>

  <!-- Apple iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes" />

  <link rel="apple-touch-icon-precomposed" sizes="57x57" href="images/apple-touch-icon-precomposed-114x114.png" />
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/apple-touch-icon-precomposed-144x144.png" />
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/apple-touch-icon-precomposed-114x114.png" />
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/apple-touch-icon-precomposed-144x144.png" />
  <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon-precomposed-144x144.png" />
  
  <link rel="apple-touch-startup-image" media="(device-width: 320px)" href="apple-touch-startup-image-320x460.png"><!-- iPhone -->
  <link rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x920.png"><!-- iPhone (Retina) -->
  <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="apple-touch-startup-image-768x1004.png"><!-- iPad (portrait) -->
  <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape)" href="apple-touch-startup-image-748x1024.png"><!-- iPad (landscape) -->
  <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-1536x2008.png"><!-- iPad (Retina, portrait) -->
  <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-1496x2048.png"><!-- iPad (Retina, landscape) -->

  <!-- Google Analytics -->
  <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-6649940-1']);
    _gaq.push(['_trackPageview']);
    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  </script>
  
</head> 

<body>

<div data-role="page" data-theme="d" id="home">
  <div data-role="header" data-theme="b">
    <h1>Volunteer Ten Minutes</h1>
    <a href="#about" data-icon="info" data-iconpos="notext" class="ui-btn-right">About</a>
  </div>
  <div data-role="content">
    <ul data-role="listview" data-inset="true" data-theme="e">
      <li><a href="#survey">Take the latest survey</a></li>
    </ul>
    <ul data-role="listview" data-inset="true" data-theme="d">
      <li data-role="list-divider">More surveys</li>
      <li><a href="#alerts">New survey alerts</a></li>
      <li><a href="#results">See the results so far</a></li>
    </ul>
    <ul data-role="listview" data-inset="true" data-theme="d">
      <li data-role="list-divider">Spread the word</li>
      <li><a href="mailto:?body=http://survey.nyp.mobi&subject=Can you help the police by filling in this survey?"><img src="images/email.png" class="ui-li-icon">Share via email</a></li>
      <li><a href="http://www.facebook.com/sharer.php?u=http://survey.nyp.mobi"><img src="images/facebook.png" class="ui-li-icon">Share on Facebook</a></li>
      <li><a href="http://www.twitter.com/share?url=http://survey.nyp.mobi"><img src="images/twitter.png" class="ui-li-icon">Share on Twitter</a></li>
    </ul>
    <ul data-role="listview" data-inset="true" data-theme="d">
      <li data-role="list-divider">Help</li>
      <li><a href="#about">About</a></li>  
      <li><a href="#help">Help</a></li>  
    </ul>
  </div>
</div>

<div data-role="page" data-theme="d" data-add-back-btn="false" id="survey">
  <div data-role="header" data-theme="b">
    <h1>Survey</h1>
  </div>
    <div data-role="content" data-theme="none" style="padding:0px;"> 
      <iframe src="survey/10_minute_volunteer_survey.htm" style="width: 100%; height: 1000px;" frameborder=0></iframe> 
    </div>
</div>

<div data-role="page" data-theme="d" data-add-back-btn="true" id="alerts">
  <div data-role="header" data-theme="b">
    <h1>Alerts</h1>
  </div>
  <div data-role="content">
    <p>We can keep you up to date so you don't miss a survey. How would you like us to notify you?</p>
    <div data-role="collapsible-set">
      <div data-role="collapsible" data-collapsed="true"> 
        <h2>Email</h2>
        <p>Sign up to our <a href="">email alert service</a> [NOT YET IMPLEMENTED] to receive an email when a new survey is available.</p>
      </div>
      <div data-role="collapsible" data-collapsed="true"> 
        <h2>Text message</h2>
        <p>Text FOLLOW NYPSURVEY to 86444 [NOT YET IMPLEMENTED], and we'll send you a text message when a new survey is available. We will not charge you for this service.</p>
      </div>
      <div data-role="collapsible" data-collapsed="true"> 
        <h2>Twitter</h2>
        <p>If you're already on Twitter, simply follow <a href="http://www.twitter.com/nypsurvey">@NYPsurvey</a> [NOT YET IMPLEMENTED] and we'll send a tweet when a new survey is available.</p>
      </div>
    </div>
    </div>
</div>

<div data-role="page" data-theme="d" data-add-back-btn="true" id="results">
  <div data-role="header" data-theme="b">
    <h1>Results</h1>
  </div>
  <div data-role="content">  
    <p>Interested in the results of previous surveys? Check back here regularly and we will keep you updated.</p>
  </div>
</div>

<div data-role="page" data-theme="d" data-add-back-btn="true" id="help">
  <div data-role="header" data-theme="b">
    <h1>Help</h1>
  </div>
  <div data-role="content">
    <p>Help text goes here.</p>
  </div>
</div>

<div data-role="page" data-theme="d" data-add-back-btn="true" id="about">
  <div data-role="header" data-theme="b">
    <h1>About</h1>
  </div>
  <div data-role="content" data-theme="d">  
    <p>Volunteer Ten Minutes was developed by North Yorkshire Police, using the following technologies:
    <ul data-role="listview" data-inset="true" data-theme="d">
      <li>JQuery 1.7.1</li>
      <li>JQuery Mobile 1.1.1</li>
      <li>add2home 1.0.1</li>
    </ul>
    </p>
    <p>We would welcome any comments about our surveys.
    <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="d">
      <li><a href="mailto:tom.stirling@northyorkshire.pnn.police.uk?subject=Survey feedback">Email feedback</a></li>
    </ul>
    </p>
  </div>
</div>

</body>
</html>
